<template>
            <div :ref="refName" class="swiper-container">
                <slot>
                <div class="swiper-wrapper">
                    <div
                        v-for="item in list"
                        :key="item.id"
                        class="swiper-slide"
                    >
                        <img :src="item.imgUrl"/>
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 上下按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                </slot>
            </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min.js";
import 'swiper/swiper-bundle.min.css'

export default {
    name: "SwiperList",
    props: {
        list: {
            type: Array,
            required: true
        },
        refName: {
            type: String,
            default: 'mySwiper'
        },
        options: {
            type: Object,
            default: () => ({
                autoplay: {
                    delay: 2000, // 时间间隔
                    pauseOnMouseEnter: true, // 鼠标移入暂停,移出继续
                    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰(touch)，拖动，点击pagination等。
                },
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            })
        },
    },
    data() {
        return {
            swiperIns: null
        }
    },
    watch: {
        list: {
            handler(nval, oval) {
                if (nval && nval.length) {
                    this.$nextTick(() => {
                        this.initSwiper();
                    })
                }
            },
            immediate: true
        }
    },
    methods: {
        initSwiper() {
            this.swiperIns = new Swiper(this.$refs[this.refName], this.options);
        }
    }
}
</script>

<style scoped>

</style>